<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>数据库管理TeleDB-DMS</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          数据管理(Database Management
          Service,简称DMS)是一种高效、安全、全面的数据库管理服务，提供免安装、免运维、即开即用、多种数据库类型与多种环境统一的web数据库管理终端。通过DMS，您可以在一个可视化环境中完成多种数据库(包含关系型数据库、NoSQL数据库)的统一管理。
          通过DMS细粒度权限管控、安全审计、操作审批、数据脱敏等功能，可以效保障企业的数据安全。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <div class="flex-row scene-box mt-20" v-for="(item, index) in sceneList" :key="index">
          <div class="text-center flex-1">
            <img :src="item.imgUrl" alt="" />
            <div class="fs-14 f-bold name">{{ item.name }}</div>
          </div>
          <ul class="item">
            <li v-for="(sitem, index) in item.list" :key="index">{{ sitem.label }}</li>
          </ul>
        </div>
        <div class="section-title mt-20">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav10',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '多擎数据可视化管理',
          label:
            '丰富的数据源支持，包括关系型数据库、NoSQL数据库，提供便捷、高效的数据及结构可视化管理。支持按需进行数据的逻辑备份及还原，可用于快速创建或搭建新环境。'
        },
        {
          name: '企业级数据安全管控',
          label:
            '细粒度权限控制，支持库、表、字段多维度按需授权，隔离人员与数据库账号密码的接触；全方面精准记录操作日志，操作记录可追溯；可定制安全规则，支持操作审批流程；支持敏感字段脱敏安全访问。'
        },
        {
          name: '降低DBA运维管理成本',
          label:
            '实时会话和慢SQL列表展示，支持一键kill会话，全方面的数据库实例的性能及运行状况图形直观展示，帮助快速定位问题；支持慢SQL模板化汇总，支持多维度指标（包括耗时、锁、执行次数等）进行排序，快速找出TOP N的慢SQL。'
        }
      ],
      sceneList: [
        {
          imgUrl: require('../../assets/images/icon/ico-r-03.png'),
          name: '混合云数据库统一管控场景',
          list: [
            {
              label:
                '云资源的统一管理，支持公有云数据库、ECS自建数据库的统一管理。OSS上。'
            },
            {
              label:
                '非云资源管理，可通过VPC专线、VPN网关等多种方式以内网方式接入本地IDC 自建数据库、友商云数据库、友商云服务器上自建的数据库。'
            }
          ]
        },
        {
          imgUrl: require('../../assets/images/icon/ico-r-04.png'),
          name: '数据安全场景',
          list: [
            {
              label:
                '规避人员接触数据库账号密码，登录产品后，可按需申请权限，所有操作在产品内发起后经过鉴权， 通过方可由产品下发到数据库，人员不再接触数据库账号密码。'
            },
            {
              label:
                '权限细粒度管理，支持按需申请库、表、字段、行级别的数据对象权限的查询、导出、变更权限类型用于相关操作，到期可自动回收，无权限则在源头拒绝。'
            },
            {
              label:
                '可定制的安全规则，每个数据库实例可定制不同的安全使用规范、允许的语法类型、不同操作对应不同的审批流程。'
            },
            {
              label:
                '精确的操作审计，全方面精准记录操作日志，包括人员、时间、模块、行为等元素，管理员可随时进行审计。'
            },
            {
              label:
                '智能数据脱敏，结合库、表、字段权限进行敏感数据的有限访问管控，支持字段不同脱敏算法的配置，有效屏蔽敏感信息。'
            }
          ]
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-13.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.scene-box {
  color: #fff;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  line-height: 20px;
  align-items: center;
  .item {
    width: 400px;
    padding-left: 20px;
    li {
      list-style: none;
      position: relative;
      &:before {
        position: absolute;
        left: -20px;
        top: 6px;
        content: '';
        width: 8px;
        height: 8px;
        background: #ffac44;
        border-radius: 50%;
      }
    }
  }
}
</style>
